<template>
  <div>
    <h3>从vuex中读取数据 --- {{ $store.state.num }} -- {{ num }} -- {{ $store.getters.getNum }}</h3>
    <hr />
    <button @click="clickNum">同步操作num数据</button>
    <hr />
    <button @click="clickAsyncNum">异步操作num数据</button>
  </div>
</template>

<script>
export default {
  // 可以利用计算属性来完成对于在vuex中获取state数据的简写
  computed: {
    num() {
      // return this.$store.state.num
      // return this.$store.state.num > 103 ? '保密' : this.$store.state.num
      return this.$store.getters.getNum
    }
  },

  created() {
    // console.log(this.$store.state.num)
  },
  methods: {
    clickNum() {
      // 在组件中让vuex中的mutations方法来操作 通知它  同步
      // 参数1：mutations中的定义的方法名
      // 参数2：payload数据  可选
      this.$store.commit('addNum', 10)
    },
    clickAsyncNum() {
      // 参数1：actions配置中的方法名
      // 参数2：可选项，传递的数据
      this.$store.dispatch('actionNum', 1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
